<template>
  <div class="foot-wrapper">
    <div class='foot-tool'>
      <transition name="slide-bottom">
        <div v-show="isShowEmoji" class="emoji-display">
          <ul>
            <li @click="insertText(item)" v-for="item of emojis">{{item}}</li>
          </ul>
        </div>
      </transition>
      <div class="emoji">
        <span @click="showEmoji(isShowEmoji=!isShowEmoji);" class="icon-emoji">😜</span>
      </div>
    </div>
    <textarea id='txt' class="chat-input" type="text" name="" @keyup.ctrl.enter="send(msg)" v-model="msg" placeholder="说点啥嘛"></textarea>
    <span class="chat-sub" :class="{'primary':!!msg}"  @click="send(msg)" type='button'>发送</span><span class='ts'>ctrl+enter</span>
  </div>
</template>

<script>
import Chat from '../api/client'
export default {
  name: 'chat-foot',
  data () {
    return {
      emojis: ['😂', '🙏', '😄', '😏', '😇', '😅', '😌', '😘', '😍', '😜', '😎', '😊', '😳', '😱', '😒', '😔', '😷', '👿', '😩', '😤', '😣', '😰', '😭', '👻', '👍', '✌️', '👉', '👀', '🐶', '🐷', '😹', '⚡️', '🔥', '🌈', '🍏', '⚽️', '❤️', '🇨🇳'],
      isShowEmoji: false,
      msg: '',
      date: ''
    }
  },
  mounted () {
    this.$nextTick(function () {
      if (!localStorage.getItem('name')) {
        this.$router.go('/login')
      }
      Chat.init()
      console.log(Chat, 'ww')
    })
  },
  methods: {
    send (msg) {
      Chat.submit(msg)
      this.msg = ''
      // console.log(Chat)
      this.isShowEmoji = false
    },
    insertText (str) {
      str = str + ` `
      if (this.msg !== '') {
        var len = this.msg.length
        var a = this.msg.substring(0, getPostion())
        var b = this.msg.substring(getPostion(), len)
        this.msg = a + str + b
      } else {
        this.msg = this.msg + str
      }
      function getPostion () {
        var otx = document.getElementById('txt')
        var cp = 0
        if (otx.selectionStart) {
          cp = otx.selectionStart
        } else {
          var rge = document.selection.createRange()
          rge.moveStart('character', -otx.value.length)
        }
        return cp
      }
    },
    newLine () {
      // setTimeout(() => this.oTextarea.scrollTop = this.oTextarea.scrollHeight, 0)
    },
    showEmoji (flag) {
      this.isShowEmoji = flag
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.foot-wrapper{
  position:absolute;
  background:#FFF;
  width:65%;
  right:5%;
  bottom:50px;
  height:150px;
}
.foot-tool{
  height:40px;
  line-height:40px;
  position:relative;
  border-bottom:1px solid #eee;
}
input,textarea{
  outline:none;
}
.chat-input{
  display: block;
  border:0 none;
  height:50px;
  width:98%;
  resize:none;
  padding:10px 1%;
  background:none;
}
.chat-sub{
  line-height:30px;
  border:1px solid #666;
  padding:0 30px;
  border-radius: 5px;
  float:right;
  margin:0 20px 0 0;
  cursor:pointer;
}
.ts{
  float:right;
  line-height:32px;font-size:12px;color:#ccc;padding-right:10px;
}
.emoji-display {
  position: absolute;
  width: 100%;
  height: 210px;
  top: -210px;
  left: 0;
  overflow-y: auto;
  background:#fff;
}
ul {
  display: flex;
  flex-wrap: wrap;
  list-style-type:none;
}
li {
  list-style-type:none;
  padding: 2px 3px;
  font-size: 2em;
  color:#000;
  float:left;
  cursor:pointer;
}
</style>
